<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/vue/vue.min.js"></script>
    <script src="../js/vue/moment.min.js"></script>
    <script src="../js/plugins/js-cookie/js.cookie.min.js"></script>
    <script src="../js/vue/common.js"></script>
</head>
<body>
<div id="app">
    <h2>内容发表</h2>
    <input name="reply">
    <input type="button" value="发表" @click="commitReply()">

    <h2>发表列表</h2>
    <ul>
        <li v-for="item in list">
            发表人:{{item.user.username}}------发表内容:{{item.content}}-----发表时间:{{item.replyTime|dateFormat}}
        </li>
    </ul>

    <h2>排行榜</h2>
    <ul>
        <li v-for="(item,index) in rank">
            第{{index+1}}:{{item.user.username}}--共{{item.count}}篇
        </li>
    </ul>

</div>
<script>
    var vue = new Vue({
        el:'#app',
        data: {
            list:[],
            rank:[]
        },
        methods:{
            commitReply:function () {
                var reply = $('input[name=reply]').val();
                ajaxPost('/tieba/reply',{reply:reply},function (data) {
                    if (data.code==200){
                        window.location.reload();
                    } else {
                        alert("发表失败");
                    }
                })
            }
        },
        mounted:function () {
            var _this = this;
            ajaxPost('/tieba/list',{},function (data) {
                if (data.code==200){
                    _this.list = data.data;
                }
            })
            ajaxPost('/tieba/rank',{},function (data) {
                if (data.code==200){
                    _this.rank = data.data;
                }
            })
        },
        filters: {
                dateFormat:function(date){
                    return dateFormat(date, "YYYY-MM-DD HH:mm:ss")
                }
        }
    })
    //格式转换
    function dateFormat(date, pattern){
        if(!pattern){
            pattern = "YYYY-MM-DD"
        }
        return moment(date).format(pattern)
    }

</script>

</body>
</html>